<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>冒泡排序动态演示</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }

        #numbers {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
            width: 100%;
            max-height: calc(100vh / 2);
            overflow-y: auto;
        }

        .number {
            background-color: #007BFF;
            color: white;
            padding: 15px 15px;
            border-radius: 5px;
            font-size: 24px;
        }

        .swapping {
            background-color: #FF5733;
        }

        button {
            padding: 10px 20px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-bottom: 20px;
        }

        button:hover {
            background-color: #218838;
        }

        #pseudo-code {
            font-family: monospace;
            background-color: #f4f4f4;
            padding: 5px;
            border-radius: 5px;
            white-space: pre;
            font-size: 32px; /* 增大伪代码字体大小 */
            font-weight: bold; /* 加粗伪代码字体 */
        }

        #status {
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <h1>冒泡排序动态演示</h1>
    <div id="status"></div>
    <div id="numbers"></div>
    <button id="startButton">开始排序</button>
    <pre id="pseudo-code">
for i from 0 to n - 2    //轮次
    for j from 0 to n - i - 2  //比较次数
        if numbers[j] > numbers[j + 1]  //判断大小
            swap(numbers[j], numbers[j + 1])  //交换
        end if
    end for
end for
    </pre>

    <script>
        // const numbers = [42, 765, 123, 86, 234, 87, 456, 68, 321, 543, 90, 109, 432, 57, 789, 210, 654, 645, 31, 678, 98, 89, 21, 64, 75, 876, 78, 55, 97, 567, 80, 54, 45, 79, 180, 439, 220, 35, 46, 890, 238, 562, 179, 834, 347, 691, 458, 723, 916, 132, 587, 264, 745, 398, 601, 853, 472, 936, 185, 519, 290, 768, 304, 627, 813, 446, 959, 160, 531, 208,47, 770, 128, 91, 239, 92, 461, 73, 326, 548, 95, 114, 437, 62, 794, 215, 659, 650, 36, 683, 103, 94, 26, 69, 80, 881, 83, 60, 102, 572, 85, 59, 50, 84, 185, 444, 225, 40, 51, 895, 243, 567, 184, 839, 352, 696, 463, 728, 921, 137, 592, 269, 750, 403, 606, 858, 477, 941, 190, 524, 295, 773, 309, 632, 818, 451, 964, 165, 536, 213];
        const numbers = generateRandomNumbers();
        const numbersDiv = document.getElementById('numbers');
        const startButton = document.getElementById('startButton');
        const statusDiv = document.getElementById('status');


        function generateRandomNumbers() {
            const numbers = [];
            while (numbers.length < 160) {
                const randomNumber = Math.floor(Math.random() * 999) + 1;
                if (!numbers.includes(randomNumber)) {
                    numbers.push(randomNumber);
                }
            }
            return numbers;
        }

        function displayNumbers(arr) {
            numbersDiv.innerHTML = '';
            arr.forEach(num => {
                const div = document.createElement('div');
                div.classList.add('number');
                div.textContent = num;
                numbersDiv.appendChild(div);
            });
        }

        displayNumbers(numbers);

        startButton.addEventListener('click', async () => {
            startButton.disabled = true;
            const n = numbers.length;
            let round = 0;
            let compareCount = 0;

            for (let i = 0; i < n - 1; i++) {
                round++;
                for (let j = 0; j < n - i - 1; j++) {
                    compareCount++;
                    statusDiv.textContent = `当前轮次: ${round}, 当前比较次数: ${compareCount}`;
                    if (numbers[j] > numbers[j + 1]) {
                        const numberDivs = numbersDiv.children;
                        numberDivs[j].classList.add('swapping');
                        numberDivs[j + 1].classList.add('swapping');
                        await sleep(10);

                        [numbers[j], numbers[j + 1]] = [numbers[j + 1], numbers[j]];
                        displayNumbers(numbers);

                        const newNumberDivs = numbersDiv.children;
                        newNumberDivs[j].classList.remove('swapping');
                        newNumberDivs[j + 1].classList.remove('swapping');
                        await sleep(10);
                    } else {
                        await sleep(10);
                    }
                }
            }
            startButton.disabled = false;
        });

        function sleep(ms) {
            return new Promise(resolve => setTimeout(resolve, ms));
        }
    </script>
</body>

</html>